<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<!-- 处理顶层是菜单的路由 -->
		<uni-section v-if="topMenuRouters.length > 0" title="主菜单" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false">
				<view v-for="(menu,index) in topMenuRouters" :key="index">
					<uni-grid-item :key="`${index}`">
						<view class="grid-item-box" @click="changeGrid(menu)">
							<svg-icon :icon="menu.meta.icon" style="height: 20px;width: 16px;" />
							<!-- <uni-icons type="person-filled" size="30"></uni-icons> -->
							<text class="text">{{ menu.meta.title }}</text>
						</view>
					</uni-grid-item>
				</view>
			</uni-grid>
		</view>
		<!-- 处理顶层是目录的路由 -->
		<view v-for="(item,index) in topDirRouters" :key="index">
			<uni-section :title="item.meta.title" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false">
					<uni-grid-item v-for="(menu, menuIndex) in item.children" :key="`${index}-${menuIndex}`">
						<view class="grid-item-box" @click="changeGrid(menu)">
							<svg-icon :icon="menu.meta.icon" style="height: 20px;width: 16px;" />
							<!-- <uni-icons type="person-filled" size="30"></uni-icons> -->
							<text class="text">{{ menu.meta.title }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/config'
	import {
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();
	import {
		getRouters
	} from "@/api/menu"
	
	import useUserStore from '@/store/modules/user'
	
	const userStore = useUserStore();

	const current = ref(0);
	const swiperDotIndex = ref(0);
	const data = ref([{
			image: '/static/images/banner/banner01.jpg'
		},
		{
			image: '/static/images/banner/banner02.jpg'
		},
		{
			image: '/static/images/banner/banner03.jpg'
		}
	]);
	const topDirRouters = ref([]); //顶层目录路由
	const topMenuRouters = ref([]); //顶层菜单路由
	const getRoutersList = () => {
		topDirRouters.value = []; //顶层目录路由
		topMenuRouters.value = []; //顶层菜单路由
		getRouters().then(res => {
			res.data.forEach(node => {
				if (typeof node.meta !== 'object') { //是顶层菜单
					topMenuRouters.value = [...topMenuRouters.value, ...node.children];
				} else if (typeof node.meta.link === 'string') { //是外链
					topMenuRouters.value.push(node);
				} else { //是顶层目录
					topDirRouters.value.push(node);
				}
			})
		});
	}
	
	const clickBannerItem = (item) => {
	}
	
	const changeSwiper = (e) => {
		current.value = e.detail.current
	}
	
	const changeGrid = (node) => {
		if(config.isCloud) {
			if(node.component === 'system/operlog/index') {
				node.component = 'monitor/operlog/index'
			} else if(node.component === 'system/logininfor/index') {
				node.component = 'monitor/logininfor/index'
			}
		}
		if (node.component == 'ParentView') { //是三级目录
			uni.navigateTo({
				url: "menu",
				success:function(){
					uni.$emit('menu', node)
				}
			});
		} else if ('monitor/druid/index' === node.component) { //是数据监控
			let url = config.baseUrl + '/druid/login.html'
			proxy.$tab.navigateTo(`/pages/common/webview/index?title=数据监控&url=${url}`)
		} else if ('tool/swagger/index' === node.component) { //是系统接口
			let url = config.baseUrl + '/swagger-ui/index.html'
			proxy.$tab.navigateTo(`/pages/common/webview/index?title=系统接口&url=${url}`)
		} else if (typeof node.meta.link === 'string') { //是外链
			proxy.$tab.navigateTo(`/pages/common/webview/index?title=${node.meta.title}&url=${node.meta.link}`)
		} else {
			uni.navigateTo({
				url: '/pages_work/' + node.component,
				fail: function(res) {
					if('navigateTo:fail timeout' === res.errMsg) {
						return
					}
					proxy.$tab.navigateTo(`/pages/common/textview/index?title=页面不存在&content=暂无该页面，请耐心等待`);
					proxy.$modal.showToast('模块建设中~')
				}
			})
			// proxy.$tab.navigateTo(node.component);
		}
		// console.log(node.component);
	}

	/** 生命周期函数--下拉刷新 */
	onPullDownRefresh(() => {
		getRoutersList();
		userStore.getInfo()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000)
	})
	
	getRoutersList();
	userStore.getInfo()
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>